<template>
  <div class="study-plan">
    <van-nav-bar
      title="作业详情"
      placeholder
      fixed
      left-arrow
      @click-left="back"
    />
    <div class="study-plan__content">
      <div class="cont cont-field">
        <van-cell-group inset>
          <van-field
            v-model="message"
            rows="6"
            autosize
            label=""
            type="textarea"
            maxlength="100"
            placeholder="请输入"
            show-word-limit
          />
        </van-cell-group>
      </div>
      <div class="assi-title">作业要求</div>
      <div class="cont">
        作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述作业要求描述
      </div>
      <div class="assi-title">最晚提交时间</div>
      <div class="cont">2023-03-22</div>
      <div class="assi-title fj">
        作业附件 <van-icon name="plus" size="14" @click="showBottom = true" />
      </div>
      <div class="list-t">
        <div class="list" v-for="i in 2" :key="i">
          <div class="list-img">
            <img src="@img/zip1.png" alt="" />
          </div>
          <div class="list-info">
            <div class="list-title">作业文件.zip</div>
            <div class="list-size">172.KB</div>
          </div>
          <div class="close">
            <img src="@img/close.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="btn">
      <footer-button title="提交作业" color="#B9BDBD"></footer-button>
      <!-- <footer-button title="提交作业" color="linear-gradient( 270deg, #1CA893 0%, #1BCD74 100%)"></footer-button> -->
    </div>
    <van-popup
      v-model:show="showBottom"
      round
      position="bottom"
      :style="{ height: '30%', backgroundColor: '#fff' }"
    >
      <div class="btn-popup">
        <span>上传附件</span>
        <van-icon name="cross" @click="showBottom = false" />
      </div>
      <div class="up-info">
        <van-row>
          <van-col :span="12">
            <div class="upImg">
              <img src="@img/zy.png" alt="" />
            </div>
            <div class="upTitle">上传照片</div>
          </van-col>
          <van-col :span="12">
            <div class="upImg">
              <img src="@img/sp.png" alt="" />
            </div>
            <div class="upTitle">上传视频</div>
          </van-col>
        </van-row>
      </div>
    </van-popup>
  </div>
</template>
<script>
import FooterButton from "@/components/FooterButton.vue";
export default {
  components: {
    FooterButton,
  },
  data() {
    return {
      message: "作业内容作业内容作业内容作业内容作业内容作业内容",
      showBottom: false,
    };
  },
  methods: {
    back() {
      window.history.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.study-plan {
  background: #ffffff;
  min-height: 100vh;
  ::v-deep {
    .van-nav-bar__placeholder {
      background: #ffffff;
    }
  }
  &__content {
    padding: 12px 16px 102px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    .cont {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #272b2d;
      line-height: 24px;
      text-align: left;
      font-style: normal;
    }
    .cont-field {
      background: #f4f4f4;
      border-radius: 4px;
      ::v-deep {
        .van-field {
          padding: 10px 0;
        }
      }
    }
    .assi-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #171a1d;
      line-height: 25px;
      text-align: left;
      font-style: normal;
      margin-top: 10px;
      padding: 22px 0 9px 0;
    }
    .fj {
      display: flex;
      justify-content: space-between;
      align-content: center;
      ::v-deep {
        .van-icon-plus {
          width: 16px;
          height: 16px;
          background: #0dc678;
          border-radius: 50%;
          color: #ffffff;
          margin-top: 4px;
          text-align: center;
        }
      }
    }
    .list {
      display: flex;
      padding: 13px 0;
      position: relative;
      .list-img {
        width: 46px;
        height: 46px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .list-info {
        flex: 1;
        padding-left: 10px;
        .list-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #171a1d;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          padding-bottom: 4px;
        }
        .list-size {
          font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
          font-weight: 400;
          font-size: 14px;
          color: rgba(23, 26, 29, 0.4);
          line-height: 20px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .close {
        position: absolute;
        right: 0;
        top: 25px;
        width: 20px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .spr {
      position: relative;
      .sp-type {
        position: absolute;
        right: 0;
        bottom: 0;
        img {
          width: 63px;
          height: 63px;
        }
      }
    }
  }
  .btn {
    padding: 16px 21px;
  }
  .tabbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0px);
    height: 50px;
  }
  .btn-popup {
    display: flex;
    justify-content: space-between;
    padding: 22px 16px 9px;
    span {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #171a1d;
      line-height: 25px;
      text-align: left;
      font-style: normal;
    }
  }
  .up-info {
    padding: 0 16px;
    text-align: center;
    .upImg {
      width: 50px;
      height: 50px;
      margin: 0 auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .upTitle {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #272b2d;
      line-height: 20px;
      text-align: center;
      font-style: normal;
    }
  }
}
</style>
